<template>
	<div class="list">
		<div class="title">违建列表</div>
		<div class="filter">
			<div>
				<span>发现时间</span>
				<el-date-picker value-format="YYYY-MM-DD" v-model="chooseDate" type="daterange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" size="large" @change="changeDate" />
			</div>
			<div>
				<span>违建属地</span>
				<el-select v-model="queryParams.parameter.townCode" clearable placeholder="请选择" style="width: 625px">
					<el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<div>
				<span>详细地址</span>
				<el-input v-model="queryParams.parameter.placeAddress" style="width: 625px; height: 58px" placeholder="请输入地址" clearable />
			</div>
			<div>
				<span>违建类别</span>
				<el-select v-model="queryParams.parameter.twoNonType" clearable placeholder="请选择" style="width: 625px">
					<el-option v-for="item in useIllegal.typeOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<div>
				<span>处置状态</span>
				<el-select v-model="queryParams.parameter.dealStatus" clearable placeholder="请选择" style="width: 625px">
					<el-option v-for="item in useIllegal.dealOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<div class="filter-btn">
				<el-button @click="handleSearch">查询</el-button>
				<el-button @click="handleReset">重置</el-button>
			</div>
		</div>
		<div class="table">
			<el-table
				class="custom-table"
				ref="dataTableRef"
				v-loading="loading"
				:data="pageData"
				height="764px"
				:row-style="rowStyle"
				:cell-style="cellStyle"
				highlight-current-row
				show-overflow-tooltip
				:header-cell-style="{ border: '1px solid rgba(27, 178, 224, 0.2)' }"
			>
				<el-table-column label="发现时间" prop="warningTime" min-width="17%" />
				<el-table-column label="违建属地" prop="townName" min-width="17%" />
				<el-table-column label="详细地址" prop="placeAddress" min-width="17%" />
				<el-table-column label="违建类别" prop="twoNonType" min-width="17%">
					<template #default="scope">
						<span>{{ useIllegal.twoNonType[scope.row.twoNonType] }}</span>
					</template>
				</el-table-column>
				<el-table-column label="处置状态" prop="dealStatus" min-width="17%">
					<template #default="scope">
						<span :style="'color:' + dealColor[scope.row.dealStatus]">{{ useIllegal.dealStatus[scope.row.dealStatus] }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" min-width="15%">
					<template #default="scope">
						<el-button type="primary" size="small" link @click="showDetail(scope.row.id)" style="font-size: 20px"> 调度 </el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="pagenation">
			<el-pagination v-model:current-page="queryParams.pageNum" :page-size="10" background layout="->,total, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange" />
		</div>
		<el-dialog title="" v-model="dialogVisible" width="1920" align-center>
			<!-- <div class="closeBtn" @click="dialogVisible = false"></div> -->
			<Detail :detailId="detailId" :dialogVisible="dialogVisible" />
		</el-dialog>
	</div>
</template>
<script lang="ts" setup>
import { getAreaList, getList } from '@/api/illegal'
import { useIllegalStore } from '@/store/modules/illegal'
import Detail from '../components/detail.vue'
const chooseDate = ref()
const useIllegal = useIllegalStore()
const rowStyle = { height: '69px', background: 'transparent' }
const cellStyle = { border: '1px solid rgba(27, 178, 224, 0.2)' }
const areaOptions = ref([])
// const twoNonType = useIllegal.twoNonType
// const dealStatus = ['未处置', '处置中', '处置完成', '处置超期', '超期已完成']
const dealColor = ['rgba(251, 247, 13,1)', 'rgba(0, 180, 42, 1)', 'rgba(255, 125, 0, 1)', 'rgba(0, 180, 42, 1)']
const loading = ref(false)
// 筛选日期
const changeDate = (val: any) => {
	queryParams.parameter.startTime = val[0]
	queryParams.parameter.endTime = val[1]
	console.log(queryParams)
}
// 分页
const total = ref(0)
// 切换每页显示条数
// const handleSizeChange = (val: number) => {
// 	console.log(`${val} items per page`)
// }
const handleCurrentChange = (val: number) => {
	// console.log(`current page: ${val}`)
	queryParams.pageNum = val
	getList(queryParams).then((res) => {
		// pageData.value = [
		// 	{
		// 		dealStatus: 1,
		// 	},
		// ]
		pageData.value = res.data.list
		total.value = res.data.total
	})
}
const initialQuery = () => ({
	pageNum: 1,
	pageSize: 10,
	parameter: {
		startTime: '',
		endTime: '',
		townCode: '',
		placeAddress: '',
		twoNonType: '',
		dealStatus: '',
		eventTypeId: '44',
		areaCode: '510185',
	},
})
const queryParams = reactive(initialQuery())

// 系统配置表格数据
const pageData = ref([])
// 点击查询
const handleSearch = () => {
	getList(queryParams).then((res) => {
		pageData.value = res.data.list
		total.value = res.data.total
	})
}
// 点击重置
const handleReset = () => {
	Object.assign(queryParams, initialQuery())
	chooseDate.value = ''
	getList(queryParams).then((res) => {
		pageData.value = res.data.list
		total.value = res.data.total
	})
}

// 弹窗
const detailId = ref()
const dialogVisible = ref(false)
const showDetail = (id) => {
	dialogVisible.value = true
	detailId.value = id
}
onMounted(() => {
	// console.log('1')
	// pageData.value = [
	// 	{
	// 		dealStatus: 1,
	// 	},
	// ]
	getList(queryParams)
		.then((res) => {
			pageData.value = res.data.list
			total.value = res.data.total
		})
		.catch((err) => {
			ElMessage.error(err)
		})
	getAreaList()
		.then((res) => {
			const map = res.data
			for (let item in map) {
				areaOptions.value.push({ value: item, label: map[item] })
			}
		})
		.catch((err) => {
			ElMessage.error(err)
		})
})
</script>
<style lang="scss" scoped>
.list {
	@include frame;
}
.filter {
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	justify-content: space-between;
	height: 136px;
	margin: 30px 0;
	font-size: 24px;
	span {
		margin-right: 15px;
	}
	&-btn {
		text-align: right;
		width: 600px;
		:deep(.el-button) {
			font-size: 24px;
			color: white;
			height: 100%;
			width: 120px;
			background: linear-gradient(180deg, rgba(27, 178, 224, 0.1) 0%, rgba(27, 178, 224, 0.4) 100%);
			border: 2px solid rgba(255, 255, 255, 0.8);
			box-shadow: 0px 0px 15px rgba(27, 178, 224, 1) inset;
		}
	}
}
.table {
	width: 100%;
	height: 764px;
}
.pagenation {
	width: 100%;
	text-align: right;
}

:deep(.el-input__wrapper) {
	background-color: transparent;
	input {
		color: white;
		font-size: 22px;
	}
}
// 下拉框
:deep(.el-select__wrapper) {
	min-height: 58px;
	background-color: transparent;
	span {
		color: white;
		font-size: 22px;
	}
}
:deep(.el-range-separator) {
	color: white;
}
:deep(.el-date-editor) {
	width: 625px;
	height: 58px;
}

// 修改table样式
.custom-table {
	// border: 1px solid red;
	background-color: transparent;
	color: white;
	--el-table-border-color: none;
	font-size: 20px;
}
:deep(.el-table th) {
	background: #003352;
	color: rgba(27, 178, 224, 1);
	height: 74px;
	font-size: 24px;
}
:deep(.el-table__body tr.current-row > td) {
	background-color: rgba(255, 255, 255, 0.04) !important; /* 选中行背景色 */
	color: #fff; /* 选中行文字颜色 */
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
	background-color: rgba(255, 255, 255, 0.04) !important; /* hover背景色 */
}

:deep(.el-dialog) {
	background-color: transparent;
	background-image: url('@/assets/images/illegal/background.png');
	background-size: cover;
	height: 1012px;
	background-repeat: no-repeat;
	// border: 1px solid #77f8ef;
}
:deep(.el-popper.is-dark) {
	font-size: 30px;
}
.closeBtn {
	position: absolute;
	// border: 1px solid red;
	width: 120px;
	height: 45px;
	right: 5px;
	top: -5px;
}
</style>
<style>
.el-button:active {
	background: linear-gradient(180deg, rgba(27, 178, 224, 0.1) 100%, rgba(27, 178, 224, 0.4) 0%) !important;
	color: rgba(27, 178, 224, 1) !important;
}
</style>
